<template>
  <view class="physics-container">
    <!-- 书籍展示区域 -->
    <view class="book-display">
      <scroll-view scroll-y class="book-scroll">
        <view class="book-list">
          <view
            v-for="(book, index) in currentBooks"
            :key="index"
            class="book-card animate__animated animate__fadeIn"
            @tap="showBookDetail(book)"
          >
            <image
              :src="url('b', book.img, 'png')"
              class="book-image"
              mode="aspectFit"
            ></image>
            <view class="book-info">
              <view class="book-title">《{{ book.title }}》</view>
              <view class="book-content">{{ book.content }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 轮盘导航 -->
    <view class="wheel-nav">
      <view class="nav-circle">
        <view
          v-for="(category, index) in categories"
          :key="index"
          :class="['nav-item', { active: currentCategory === category.type }]"
          :style="getItemStyle(index)"
          @tap="selectCategory(category.type)"
        >
          <view class="icon-wrapper">
            <image
              :src="url('bd', index, 'png')"
              class="category-icon"
              mode="aspectFit"
            ></image>
          </view>
          <text class="category-label">{{ category.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
const url = $url;
// 定义分类
const categories = [ { label: "声", type: "sound" },
  { label: "力", type: "force" },
  { label: "热", type: "heat" },
 
  { label: "电", type: "em" },
  { label: "光", type: "light" },
];

// 书籍数据
const booksData = {
  force: [
    {
      title: "梦溪笔谈",
      img: "0",
      audio:'mxbt',
      content: '是百科全书式的著作，尤以其科学技术价值闻名于世。该书在国际亦受重视，英国科学史家李约瑟评价为"中国科学史上的里程碑"。',
      detail: {
        type: "重要古籍",
        author: "沈括",
        time: "11世纪，一说1086-1093",
        volume: "三十卷",
        pages: "342页",
        publishTime: "2003年3月",
        binding: "平装",
        price: "22元",
        dynasty: "北宋",
        bookType: "笔记体百科全书",
        value: "中国科学史上里程碑"
      }
    },
    {
      title: "天工开物",
      img: "1",
      audio:'tgkw',
      content: "是中国古代一部综合性的科学技术著作，本书初刊于1637年（明崇祯十年），作者是明朝发明家宋应星。",
      detail: {
        author: "宋应星",
        time: "1637年（明崇祯十年）",
        dynasty: "明朝",
        bookType: "科学技术著作"
      }
    },
    {
      title: "考工记",
      img: "2",
      audio:'kgj',
      content: "是中国所见年代最早关于手工业技术的文献，该书在中国科技史、工艺美术史和文化史上都占有重要地位。",
      detail: {
        dynasty: "周代",
        bookType: "工艺技术著作",
        value: "中国古代最早的手工业技术文献"
      }
    },
  ],
  heat: [
    {
      title: "刘子",
      img: "3",
      audio:'lz',
      content: "又名《刘子新论》，是北朝时期的一部重要思想著作，传为南朝梁学者刘昼所撰。全书共十卷五十五篇，内容博涉儒、道、名、法各家，涵盖哲学、政治、伦理、军事等领域。",
      detail: {
        otherName: "刘子新论",
        author: "刘昼",
        dynasty: "南朝梁",
        volume: "十卷五十五篇",
        bookType: "思想著作"
      }
    },
    {
      title: "周礼",
      img: "4",
      audio:'zl',
      content: '又名《周官》，是儒家经典"三礼"之一，相传为西周时期周公旦所著，实成书于战国时代。全书以官制体系为纲，分设天官、地官、春官、夏官、秋官、冬官六篇。',
      detail: {
        otherName: "周官",
        author: "传为周公旦",
        dynasty: "战国",
        bookType: "儒家经典",
        classification: "三礼之一"
      }
    },
  ],
  sound: [
    {
      title: "论衡",
      img: "5",
      audio:'lh',
      content: '是东汉思想家王充所著的唯物主义哲学巨著，全书共八十五篇（今存八十四篇），以"疾虚妄"为宗旨，系统批判了汉代盛行的谶纬神学、天人感应等迷信思想。',
      detail: {
        author: "王充",
        dynasty: "东汉",
        volume: "八十五篇（今存八十四篇）",
        bookType: "哲学著作",
        theme: "批判谶纬神学、天人感应等迷信思想",
        value: "中国古代唯物主义哲学重要著作"
      }
    },
  ],
  em: [
    {
      title: "晋书",
      img: "6", audio:'js',
      content: "是唐代房玄龄等人奉敕编修的官修正史，二十四史之一，记载了西晋（265—316）、东晋（317—420）及十六国时期的历史。",
      detail: {
        author: "房玄龄等",
        dynasty: "唐代",
        bookType: "官修正史",
        classification: "二十四史之一",
        content: "记载西晋、东晋及十六国时期历史"
      }
    },
    {
      title: "管子",
      img: "7", audio:'gz',
      content: "是中国古代重要的哲学、政治、经济著作，相传为春秋时期齐国名相管仲及其学派所撰，实际成书历经战国至汉代多人增补。",
      detail: {
        author: "传为管仲及其学派",
        dynasty: "春秋至汉代",
        bookType: "哲学、政治、经济著作",
        value: "中国古代重要的政治经济理论著作"
      }
    },
  ],
  light: [
    {
      title: "革象新书",
      img: "8", audio:'gxxs',
      content: "是中国古代一部重要的天文学与数学著作，由元代科学家赵友钦所著。该书以探究天文历法、数学计算和仪器制作为核心。",
      detail: {
        author: "赵友钦",
        dynasty: "元代",
        bookType: "天文学与数学著作",
        focus: "天文历法、数学计算和仪器制作",
        value: "中国古代重要天文数学著作"
      }
    },
    {
      title: "淮南万毕术",
      img: "9", audio:'hnwbs',
      content: '是西汉淮南王刘安主持编撰的一部方术奇书，原书已佚，现存辑录本。该书以"万毕"为名，意指"万变皆毕于此"。',
      detail: {
        author: "刘安主持编撰",
        dynasty: "西汉",
        status: "原书已佚，现存辑录本",
        bookType: "方术著作",
        nameOrigin: "万变皆毕于此"
      }
    },
    {
      title: "营造法式",
      img: "10", audio:'yzfs',
      content: "是北宋官方颁布的一部集大成的建筑学经典，由将作监李诫于元符三年（1100年）编修完成，崇宁二年（1103年）刊行。",
      detail: {
        author: "李诫",
        dynasty: "北宋",
        time: "元符三年（1100年）编修完成，崇宁二年（1103年）刊行",
        bookType: "建筑学经典",
        publisher: "北宋官方颁布",
        officialPost: "将作监"
      }
    },
  ],
};

const currentCategory = ref("force");

// 计算当前显示的书籍
const currentBooks = computed(() => {
  return booksData[currentCategory.value] || [];
});

// 修改轮盘项目的位置计算
const getItemStyle = (index) => {
  // 手动设置每个图标的位置，确保它们不会重合
  const positions = [
    { x: 0, y: -280 },       // 力（正上方）
    { x: 170, y: -240 },     // 热（右上方）
    { x: 280, y: -120 },     // 声（右方）
    { x: -280, y: -120 },    // 电（左方）
    { x: -170, y: -240 }     // 光（左上方）
  ];
  
  return {
    transform: `translate(${positions[index].x}rpx, ${positions[index].y}rpx)`,
  };
};

// 选择分类
const selectCategory = (type) => {
  currentCategory.value = type;
};

// 显示书籍详情
const showBookDetail = (book) => {
  // 将书籍数据存储在本地，以便详情页面获取
  uni.setStorageSync('selectedBook', JSON.stringify(book));
  
  // 导航到详情页面
  uni.navigateTo({
    url: `/pages/other/physicsBook/detail?bookId=${book.img}&category=${currentCategory.value}`
  });
};

// 格式化标签
const formatLabel = (key) => {
  const labels = {
    otherName: '别名',
    classification: '分类',
    theme: '主题',
    focus: '研究焦点',
    nameOrigin: '名称来源',
    status: '当前状态',
    publisher: '出版方',
    officialPost: '官职',
    content: '内容'
  };
  
  return labels[key] || key;
};
</script>

<style lang="scss" scoped>
.physics-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 40rpx;
  position: relative;
}

.book-display {
  padding-bottom: 400rpx;
  height: calc(100vh - 440rpx);
}

.book-scroll {
  height: 100%;
}

.book-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.book-card {
  background: #f3e7d3;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  height: 300rpx;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-5rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
  }

  &:nth-child(even) {
    flex-direction: row-reverse;

    .book-info {
      text-align: right;
    }
  }

  .book-image {
    width: 240rpx;
    height: 100%;
    object-fit: cover;
  }

  .book-info {
    flex: 1;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
  }

  .book-title {
    font-size: 36rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: bold;
  }

  .book-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}

.wheel-nav {
  position: fixed;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 800rpx;
  height: 300rpx;
  
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700rpx;
    height: 350rpx;
    border-top: 16rpx solid #e0e0e0;
    border-radius: 350rpx 350rpx 0 0;
    box-sizing: border-box;
  }
}

.nav-circle {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nav-item {
  position: absolute;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  
  &.active {
    transform: scale(1.2);
    
    .icon-wrapper {
      background: var(--td-brand-color);
    }
    
    .category-label {
      color: var(--td-brand-color);
      font-weight: bold;
    }
  }
  
  .icon-wrapper {
    width: 96rpx;
    height: 96rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
  
  .category-icon {
    width: 56rpx;
    height: 56rpx;
  }
  
  .category-label {
    font-size: 24rpx;
    color: #666;
    margin-top: 10rpx;
    white-space: nowrap;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 800rpx;
  color: #999;

  .bi {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
}
</style>
